<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <div class="top_charts">
                <div ref="total_workshop_cost" style="width: 100%; height: 350px" />
            </div>
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px"
                    style="margin-bottom: -20px">
                    <el-form-item label="批次" prop="batchNumber">
                        <el-input placeholder="请输入内容" v-model="searchData.batchNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="段号" prop="segmentNumber">
                        <el-input placeholder="请输入内容" v-model="searchData.segmentNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="工艺" prop="craftName">
                        <el-input placeholder="请输入内容" v-model="searchData.craftName"></el-input>
                    </el-form-item>
                    <el-form-item label="厂区" prop="plantId">
                        <el-select v-model="searchData.plantId" clearable placeholder="请选择" @change="plantChange">
                            <el-option v-for="item in plantList" :key="item.id" :label="item.plantName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产区域" prop="workshopId">
                        <el-select v-model="searchData.workshopId" clearable placeholder="请选择">
                            <el-option v-for="item in workshopList" :key="item.id" :label="item.shopName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期" prop="finishDate">
                        <el-date-picker v-model="searchData.finishDate" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="" prop="templateNumber">
                        <el-button v-hasPermi="['productManage/productRecord:query']" type="primary"
                            icon="el-icon-search" size="mini" @click="search">{{ $t('search') }}</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8 flex-between" style="margin-top: 20px; width: 100%">
                    <div></div>
                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh"
                                v-hasPermi="['productManage/productRecord:query']" @click="resetFields" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="导出" placement="top">
                            <el-button size="mini" circle icon="el-icon-download"
                                v-hasPermi="['productManage/productRecord:export']" @click="handleExport" />
                        </el-tooltip>
                    </div>
                </div>

                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable :data="setTableData" :columns="setTableColumns" :curr-page="searchData.currPage"
                            :total-page="pageTotal" :page-size="searchData.pageSize" @sizeChange="sizeChange"
                            @currentChange="currentChange">
                            <template #segmentNumber="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.segmentNumber || '-' }}</div>
                            </template>
                            <template #specification="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.specification || '-' }}</div>
                            </template>
                            <template #segmentWeight="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.segmentWeight || '-' }}</div>
                            </template>
                            <template #craftName="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.craftName || '-' }}</div>
                            </template>
                            <template #factoryId="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.factoryId || '-' }}</div>
                            </template>
                            <template #workshopId="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.workshopId || '-' }}</div>
                            </template>
                            <template #finishDate="scope">
                                <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                    class="child_table_row">{{ item.finishDate || '-' }}</div>
                            </template>
                            <template #operation="scope">
                                <div v-if="scope.scope.row.batchSegmentationInfos">
                                    <div v-for="(item, index) in scope.scope.row.batchSegmentationInfos" :key="index"
                                        class="child_table_row">
                                        <!-- <el-button type="text" class="ope_btn" >编辑</el-button> -->
                                        <el-button v-hasPermi="['productManage/productRecord:remove']" size="small"
                                            type="danger" plain style="padding: 5px" icon="el-icon-delete"
                                            @click="delOne(scope.scope.row, item)">
                                            删除
                                        </el-button>
                                    </div>
                                </div>
                                <div v-else>
                                    <!-- <el-button type="text" class="ope_btn" >编辑</el-button> -->
                                    <el-button v-hasPermi="['productManage/productRecord:remove']" size="small"
                                        type="danger" plain style="padding: 5px" icon="el-icon-delete"
                                        @click="delOne(scope.scope.row)">
                                        删除
                                    </el-button>
                                </div>
                            </template>
                            <!-- <template #operation="scope">
            <el-button type="text" class="ope_btn" >编辑</el-button>
            <el-button type="text" class="del_btn" @click="delOne(scope.scope.row)">删除</el-button>
          </template> -->
                        </sysTable>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getProductionList, editProduction, addProduction, getProductionCharts, deleteProduction, getWorkshopList, getFactoryAreaList } from '../api/product/index';
import sysTable from '../components/SysTable';
export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                finishDate: '',
                batchNumber: '',
                segmentNumber: '',
                craftName: '',
                factoryId: '',
                workshopId: '',
                pageSize: 10,
                currPage: 1,
            },
            monthData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            waterStatisticsY: [],
            setTableData: [],
            pageTotal: 0,
            workshopList: [],
            plantList: [],
            setTableColumns: [
                {
                    label: '批次编号',
                    prop: 'batchNumber',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '开始时间',
                    prop: 'beginDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '结束时间',
                    prop: 'endDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '生产时长',
                    prop: 'time',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '段号',
                    prop: 'segmentNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '规格',
                    prop: 'specification',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '分段重量',
                    prop: 'segmentWeight',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '工艺',
                    prop: 'craftName',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '厂区',
                    prop: 'factoryId',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                // {
                //   label: '有功电量(kW·h)',
                //   prop: 'activePower',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                // {
                //   label: '无功电量(Kvar)',
                //   prop: 'reactivePower',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                {
                    label: '生产区域',
                    prop: 'workshopId',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },

                {
                    label: '完成时间',
                    prop: 'finishDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    minWidth: '120',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            buttonLoading: false,
        };
    },
    mounted() {
        this.getPageList();

        this.getPlantList();
        this.getProductionCharts();
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.getPageList();
            // this.getPlantList()
        },
        resetFields() {
            this.searchData = {
                finishDate: '',
                batchNumber: '',
                segmentNumber: '',
                craftName: '',
                factoryId: '',
                workshopId: '',
                pageSize: 10,
                currPage: 1,
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.currPage = val;
            this.getPageList();
        },
        getPageList() {
            getProductionList(this.searchData)
                .then((res) => {
                    if (res.code == 200) {
                        this.setTableData = res.data.list || [];
                        this.pageTotal = res.data.total || 0;
                    } else {
                        this.setTableData = [];
                        this.pageTotal = 0;
                        this.$message.error('列表数据请求失败，请联系管理员');
                    }
                    this.buttonLoading = false;
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        handleExport() {
            this.buttonLoading = true;
            var datas = {
                finishDate: this.searchData.finishDate,
                batchNumber: this.searchData.batchNumber,
                segmentNumber: this.searchData.segmentNumber,
                craftName: this.searchData.craftName,
                factoryId: this.searchData.factoryId,
                workshopId: this.searchData.workshopId,
                pageSize: '',
                currPage: '',
            };
            const obj = JSON.parse(JSON.stringify(datas));
            this.download(
                'production/productionRecords/queryListReport',
                {
                    ...obj,
                },
                '生产记录.xlsx'
            );
            this.buttonLoading = false;
        },
        delOne(val, data) {
            console.log(val, data, '3333');
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    // const obj = {
                    //   id: val.id
                    // }
                    const id = data.id ? data.id : val.id;
                    deleteProduction(id).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                            this.searchData.currPage = 1;
                            this.getPageList();
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg,
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        getPlantList() {
            getFactoryAreaList().then((res) => {
                console.log(res, '厂区列表');
                if (res.code == 200) {
                    this.plantList = res.data || [];
                } else {
                    this.$message.error('厂区数据请求失败，请联系管理员');
                }
            });
        },
        getWorkshopList(val) {
            getWorkshopList(val).then((res) => {
                console.log('区域列表');
                if (res.code == 200) {
                    this.workshopList = res.data || [];
                } else {
                    this.$message.error('区域数据请求失败，请联系管理员');
                }
            });
        },
        plantChange(val) {
            console.log(val, '厂区chagne');
            this.workshopList = [];
            this.searchData.workshopId = '';
            if (val) {
                this.getWorkshopList(val);
            }
        },
        getProductionCharts() {
            const obj = {
                dateType: 3,
            };
            getProductionCharts(obj).then((res) => {
                console.log(res, '图表数据');
                if (res.code == 200) {
                    const arr = Object.keys(res.data).sort();
                    this.waterStatisticsY = [];

                    arr.map((item) => {
                        this.waterStatisticsY.push(res.data[item]);
                    });
                    this.initWaterStatistics();
                } else {
                    this.$message.error('图表数据请求失败，请联系管理员');
                }
            });
        },
        initWaterStatistics() {
            const myEcharts = echarts.init(this.$refs.total_workshop_cost);
            myEcharts.setOption({
                color: ['#5e90f6', '#5ed8a7', '#5e7091', '#f5bc2e'],
                backgroundColor: '#fff',
                title: {
                    text: '生产统计',
                    left: '15',
                    top: '12',
                    textStyle: {
                        color: '#000',
                        fontSize: '20px',
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: ' {b} : {a} : {c}',
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    // top: '2%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.monthData,
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#606266',
                                fontSize: '12px',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#606266',
                                fontSize: '12px',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '软化水',
                        type: 'bar',
                        barWidth: '40%',
                        data: this.waterStatisticsY,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            { offset: 0, color: '#3399FF' },
                                            { offset: 1, color: '#98CBFF' },
                                        ],
                                        false
                                    );
                                },
                            },
                        },
                    },
                ],
            });
            this.charts1 = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;
    background: #f3f4f5;
    overflow: auto;
}

.main_content {
    padding: 16px 20px;
}

::v-deep.el-card {
    border-radius: 8px;
}

.top_charts {
    width: 100%;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 10px;
    padding-top: 10px;
    overflow: hidden;
}

.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;

    .page_content_head {
        display: flex;
    }
}

::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;

        .tableHeaderCell:active {
            opacity: 0.6;
        }

        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:last-of-type {
            cursor: default;
        }

        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }

    .tableRow {
        .cell {
            padding: 0px !important;
        }
    }
}

.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}

.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}

.child_table_row {
    border-bottom: 1px solid #dfe6ec;
}

.child_table_row:last-of-type {
    border-bottom: none;
}
</style>
